import React from 'react'
function FancyBorder (props) {
  return <div style={{ color: props.color }}>{props.children}</div>
}
function Dialog (props) {
  return (
    <FancyBorder color='red'>
      <h1>{props.title}</h1>
      <p>{props.message}</p>
      {props.children}
    </FancyBorder>
  )
}
class SignUpDialog extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      login: ''
    }
    this.handleClick=this.handleClick.bind(this)
  }
  render () {
    const { login } = this.state
    return (
      <Dialog title='箜篌引' message='公无渡河，公竟渡河，渡河而亡，其可奈何'>
        <input value={login} onChange={this.handleChange}></input>
        <button onClick={this.handleClick}>Sign Me Up!</button>
      </Dialog>
    )
  }
  handleChange = e => {
    this.setState({
      login: e.target.value
    })
  }
  handleClick(){
alert(`Welcome aboard, ${this.state.login}!`)
  }
}

export { SignUpDialog }
